<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>

<script>
import { reactive, watchEffect } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })

    watchEffect(() => {
      // 1. 不指定监视哪一个，这里面用到了谁就监听谁
      // 2. 第一次的时候肯定会执行
      // 例如对 obj.hobby.eat 的修改，由于这里用到了 obj.hobby.eat，则会执行
      // !注意如果这里用的是 obj 则不会被执行
      console.log(obj.hobby.eat)
    })

    return { obj }
  },
}
</script>
